<template>
  <div class="home-container">
    <el-button
      type="primary"
      class="preservation"
      @click="NotificationSetting"
      v-has="'maintenanceApp:workOrderReceive:save'"
      >保存</el-button
    >
    <el-table :data="tableData" :span-method="objectSpanMethod" border class="switchTable">
      <el-table-column prop="role" label="角色" width="180"> </el-table-column>
      <el-table-column prop="type" label="类型"> </el-table-column>
      <el-table-column prop="sms" label="短信通知">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.sms" active-color="#3378FF" inactive-color="#DCDFE6"> </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="公众号通知">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.wechat" active-color="#3378FF" inactive-color="#DCDFE6"> </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="邮件通知">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.email" active-color="#3378FF" inactive-color="#DCDFE6"> </el-switch>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getOrderNotificationSetting, updateOrderNotificationSetting } from '@/api/orderManage';
export default {
  name: '',
  data() {
    return {
      //表格数据
      tableData: []
    };
  },
  mounted() {
    this.getNoticeSet();
  },
  methods: {
    getNoticeSet() {
      getOrderNotificationSetting().then(res => {
        let valArr = res.data;
        if (valArr.length === 0) {
          valArr = [
            // {
            //   customer_id: 1,
            //   email: 2,
            //   operate: 1,
            //   order_role_type: 'engineer',
            //   sms: 2,
            //   wechat: 2
            // },
            {
              customer_id: 1,
              email: 2,
              operate: 5,
              order_role_type: 'engineer',
              sms: 2,
              wechat: 2
            },
            {
              customer_id: 1,
              email: 2,
              operate: 2,
              order_role_type: 'engineer',
              sms: 2,
              wechat: 2
            },
            {
              customer_id: 1,
              email: 2,
              operate: 5,
              order_role_type: 'dispatch',
              sms: 2,
              wechat: 2
            },
            {
              customer_id: 1,
              email: 2,
              operate: 4,
              order_role_type: 'dispatch',
              sms: 2,
              wechat: 2
            },
            {
              customer_id: 1,
              email: 2,
              operate: 3,
              order_role_type: 'dispatch',
              sms: 2,
              wechat: 2
            },
            {
              customer_id: 1,
              email: 2,
              operate: 1,
              order_role_type: 'dispatch',
              sms: 2,
              wechat: 2
            },
            {
              customer_id: 1,
              email: 2,
              operate: 5,
              order_role_type: 'applicant',
              sms: 2,
              wechat: 2
            },
            {
              customer_id: 1,
              email: 2,
              operate: 4,
              order_role_type: 'applicant',
              sms: 2,
              wechat: 2
            },
            {
              customer_id: 1,
              email: 2,
              operate: 3,
              order_role_type: 'applicant',
              sms: 2,
              wechat: 2
            },
            {
              customer_id: 1,
              email: 2,
              operate: 2,
              order_role_type: 'applicant',
              sms: 2,
              wechat: 2
            }
          ];
        }
        valArr.forEach(item => {
          item.email === 1 ? (item.email = true) : (item.email = false);
          item.wechat === 1 ? (item.wechat = true) : (item.wechat = false);
          item.sms === 1 ? (item.sms = true) : (item.sms = false);
          switch (item.order_role_type) {
            case 'engineer':
              item.role = '工程师';
              break;
            case 'dispatch':
              item.role = '派单人';
              break;
            case 'applicant':
              item.role = '申请人';
              break;
          }
          switch (item.operate) {
            case 1:
              item.type = '创建';
              break;
            case 2:
              item.type = '派发';
              break;
            case 3:
              item.type = '接收';
              break;
            case 4:
              item.type = '完成';
              break;
            case 5:
              item.type = '取消';
              break;
          }
        });

        this.tableData = valArr.reverse();
      });
    },

    //列表合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 4 === 0) {
          return {
            rowspan: 4,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    //设置变更的消息通知
    NotificationSetting() {
      let params = { list: [] };
      params.list = JSON.stringify(this.tableData);
      params.list = JSON.parse(params.list);
      params.list.forEach(item => {
        item.email === true ? (item.email = 1) : (item.email = 2);
        item.sms === true ? (item.sms = 1) : (item.sms = 2);
        item.wechat === true ? (item.wechat = 1) : (item.wechat = 2);
        delete item.role;
        delete item.type;
      });
      updateOrderNotificationSetting(params).then(res => {
        if (res.message === '204') {
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.getNoticeSet();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.table-tranparent.el-table tbody tr:hover > td {
  background-color: #ffffff !important;
}

.table-tranparent.el-table tbody tr:hover {
  background-color: #ffffff !important;
}
.home-container {
  padding: 0px 20px;
}
.switchTable {
  margin-top: 76px;
}
.preservation {
  position: absolute;
  top: 73px;
  right: 30px;
}
</style>
